<template>
	<view class="blog">
		<view class="head">
			<view class="userinfo">
				<view class="avatar">
					<image :src="getUserAvatar(item.user_id)" mode="aspectFill"></image>
				</view>
				<view class="name">{{getUserNickName(item.user_id)}}</view>
				<view class="time">
					{{$u.timeFrom(item.publish_date, 'yyyy年mm月dd日 hh时MM分ss秒')}}
				</view>
			</view>
			
			<view v-if="checkRole()" @click="openActionSheet" class="more">
				<text class="iconfont icon-gengduo"></text>
			</view>
		</view>
		<view class="body">
			<view @click="toDetail" class="title">
					{{item.title}}
			</view>
			<view v-if="item.description" @click="toDetail" class="text">
				<view class="t">
					{{item.description}}
				</view>
			</view>
			<view v-if="item.picUrls.length" class="piclist">
				<view @click="previewImg(item.picUrls,index)" class="pic" :class="item.picUrls.length==1?'only':''" v-for="(pic,index) in item.picUrls" :key="index">
					<image :src="pic" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="box">
				<text class="iconfont icon-liulan"></text>
				<text>{{item.view_count}}</text>
			</view>
			<view @click="toDetail" class="box">
				<text class="iconfont icon-xinxi"></text>
				<text>{{item.comment_count || '评论'}}</text>
			</view>
			<view @click.stop="like" class="box" :class="{'box-active':item.isLike}">
				<text class="iconfont" :class="item.isLike?'icon-dianzan_kuai':'icon-dianzan'"></text>
				<text>{{item.like_count || '点赞'}}</text>
			</view>
		</view>
		<u-action-sheet @select="selectClick" @close="close" :actions="list" cancelText="取消" round="10" :show="show"></u-action-sheet>
	</view>
</template>

<script>
	const db = uniCloud.database();
	import {getUserNickName,getUserAvatar} from '@/utils/tools.js';
	const utilsObj = uniCloud.importObject("utilsObj",{customUI:true});
	import {store} from '../../uni_modules/uni-id-pages/common/store.js'
	export default {
		name:"blog-item",
		props:{
			item:{
				type:Object,
				default:()=>({})
			},
			isLike:{
				type:Boolean,
				default:false
			},
			like_count:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				list:[
					{
						name:'修改',
						type:'edit'
					},
					{
						name:'删除',
						type:'del',
						color:'#ff0000'
					}
				],
				show:false,
				likeLock:false
			};
		},
		methods:{
			getUserNickName,
			getUserAvatar,
			// 检查角色权限
			checkRole(){
				let uid = uniCloud.getCurrentUserInfo().uid;
				let isSelf = uid == (this.item.user_id[0] && this.item.user_id[0]._id);
				let isAdmin = this.uniIDHasRole("low-admin");
				return isSelf || isAdmin;
			},
			// 预览图片
			previewImg(list,index){
				uni.previewImage({
					urls:list,
					current:index
				})
			},
			// to 详情
			toDetail(){
				uni.navigateTo({
					url:"/pages/detail/detail?id="+this.item._id
				})
			},
			// 打开操作栏
			openActionSheet(){
				this.show = true;
			},
			// 关闭
			close(){
				this.show = false;
			},
			// 修改/删除
			selectClick(e){
				if(e.type=='edit'){//修改
					uni.navigateTo({
						url:`/pages/edit/edit?id=${this.item._id}&type=edit`
					})
				}else{//删除
					uni.showModal({
						title:"提示",
						content:"确定删除该篇文章吗？",
						success: (res) => {
							if(res.confirm){
								uni.showLoading({
									title:"正在删除..."
								})
								db.collection("circle-articles").doc(this.item._id).update({
									delState:true
								}).then(info=>{
									uni.showToast({
										title:"删除成功",
										icon:"none"
									})
									this.$emit("refreshData");
								}).catch(err=>{
									uni.showToast({
										title:err.errMsg,
										icon:"none"
									})
								})
								.finally(_=>{
									uni.hideLoading()
								})
							}
						}
					})
				}
				this.show = false;
			},
			// 点赞/取消点赞
			like(){
				if(this.likeLock) return uni.showToast({
					title:"操作频繁，请稍后",
					icon:"none"
				})
				if(!store.hasLogin){
					uni,uni.showModal({
						title: '提示',
						content: '您还未登录，是否前往登录页',
						success: res => {
							if(res.confirm){
								uni.navigateTo({
									url:"/"+pageJson.uniIdRouter.loginPage
								})
							}
						}
					});
					return
				}
				this.likeLock = true;
				
				// this.item.isLike?this.item.like_count--:this.item.like_count++;
				// this.item.isLike = !this.item.isLike;
				let like_count = this.item.like_count;
				this.item.isLike ? like_count-- : like_count++
				this.$emit("update:like_count",like_count)
				this.$emit("update:isLike",!this.item.isLike)
				this.likeFunc();
			},
			// 点赞操作数据库
			likeFunc(){
				if(!this.item.isLike){
					uni.showToast({
						title:"取消点赞成功～",
						icon:"none"
					})
					 db.collection("circle-like").where(`article_id=='${this.item._id}' && user_id==$cloudEnv_uid`).remove().then(res=>{
						 utilsObj.operation("circle-articles","like_count",this.item._id,-1)
					 }).finally(_=>{
						 this.likeLock = false;
					 })
				}else{
					uni.showToast({
						title:"点赞成功～",
						icon:"none"
					})
					db.collection("circle-like").add({
						article_id:this.item._id
					}).then(res=>{
						utilsObj.operation("circle-articles","like_count",this.item._id,1)
					}).finally(_=>{
						 this.likeLock = false;
					 })
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.blog{
		.head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			.userinfo{
				display: flex;
				align-items: center;
				.avatar{
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.name{
					color: #222;
					padding-left: 10rpx;
				}
				.time{
					color: #888;
					font-size: 22rpx;
					padding-left: 20rpx;
				}
				.more{
					padding: 5rpx;
					.iconfont{
						font-size: 50rpx;
						color: #888;
					}
				}
			}
		}
		.body{
			padding: 15rpx 0 30rpx;
			.title{
				font-size: 44tpx;
				color: #000;
				font-weight: bold;
			}
			.text{
				padding: 10rpx 0;
				font-size: 30rpx;
				color: #888;
				.t{
					text-overflow: ellipsis;
					display: -webkit-box;
					overflow: hidden;
					line-clamp: 2;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
			.piclist{
				display: flex;
				padding-top: 20rpx;
				.pic{
					width: 225rpx;
					height: 225rpx;
					margin-right: 6rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
					&:first-child{
						border-radius: 20rpx 0 0 20rpx;
					}
					&:last-child{
						border-radius: 0 20rpx 20rpx 0;
					}
					&.only{
						border-radius: 20rpx;
					}
				}
			}
		}
		.info{
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 26rpx;
			color: #333;
			.box{
				display: flex;
				align-items: center;
				padding: 15rpx 0 5rpx;
				&-active{
					color: #0199FE;
				}
				.iconfont{
					font-size: 40rpx;
					padding-right: 10rpx;
				}
			}
		}
	}
</style>